<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Flex box</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 200vh;
        width: 100vw;
        background-color: #fff;
    }

</style>
<body>
</body>
<script>
    let handleBodyClick = function (e) {
        let clientWidth = document.body.clientWidth;
        let clientHeight = document.body.clientHeight;
        console.log(clientWidth,clientHeight)
        console.log(e.x,e.y)
        console.log()
        let width = 200
        let height = 100
        let oldDiv = document.querySelector(".createdDiv");
        if (oldDiv) {
            oldDiv.remove()
        }
        let newDiv = document.createElement('div');
        newDiv.classList.add('createdDiv')
        newDiv.style.position = 'fixed'
        newDiv.style.backgroundColor = 'black'
        if ((clientWidth - e.x) > width) {
            newDiv.style.left = `${e.x}px`
        } else {
            newDiv.style.right = `${clientWidth - e.x}px`
        }
        if ((clientHeight - e.y) > height) {
            newDiv.style.top = `${e.y}px`
        } else {
            newDiv.style.bottom = `${clientHeight-e.y}px`
        }
        newDiv.style.width = `${width}px`
        newDiv.style.height = `${height}px`
        document.body.appendChild(newDiv)
    }
    document.body.onclick = function (e) {
        handleBodyClick(e)
    }
</script>
</html>